<script lang="ts">
export default {
  options: {
    virtualHost: true, // 虚拟节点
    styleIsolation: 'shared', // 解除样式隔离
  },
}
</script>

<script setup lang="ts">
defineOptions({ name: 'ProPicker' })

const props = withDefaults(defineProps<{
  code: string
  value: any
}>(), {
  modelValue: null,
  code: undefined,
})

const dicts = useDict(props.code)[props.value]
const label = dicts?.label || '-'
const type = computed(() => {
  const color = dicts?.extend?.color
  if (color === 'red') {
    return 'danger'
  } else if (color === 'blue') {
    return 'primary'
  } else if (color === 'green') {
    return 'success'
  } else {
    return 'default'
  }
})
</script>

<template>
  <wd-tag :type="type">
    {{ label }}
  </wd-tag>
</template>

<style lang="scss" scoped>

</style>
